<template>
  <view class="container">
    <commonHead title='歌单' :isShow='true' bgcolor='#5281b5'></commonHead>
    <scroll-view scroll-y="true" >
      <view>
        <commonRankHead :titleInfo="headerInfo"></commonRankHead>
        <commonRankItem :songTracks="songLists"></commonRankItem>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import commonHead from '../../components/common-head/common-head.vue'
  import commonRankHead from '../../components/common-rank-head/common-rank-head.vue'
  import commonRankItem from '../../components/common-rank-item/common-rank-item.vue'
  import request from '../../common/request.js'
  export default {
    components:{commonHead,commonRankHead,commonRankItem},
    data() {
      return {
        // 头部信息 榜单名字 榜单描述 榜单图
        headerInfo:{
          name:'',
          description:'',
          coverImgUrl:'',
          playCount:0
        },
        // 100首歌曲
        songLists:[],
      }
    },
    // option 是navigateTo进行参数传递的接收者
    onLoad(option){
      // 数据请求
      console.log('数据请求',option.id)
      request(`/playlist/detail?id=${option.id}`).then((res)=>{
        let {name,description,coverImgUrl,playCount,tracks} = res.data.playlist;
        this.headerInfo.name = name;
        this.headerInfo.description = description;
        this.headerInfo.coverImgUrl = coverImgUrl;
        this.headerInfo.playCount = playCount;
        this.songLists = tracks;
      },(err)=>{
        console.log(err)
      })
    },
    methods: {
      
    }
  }
</script>

<style scoped>
  .container scroll-view{
    height: calc(100vh - 75px);
  }
</style>
